<template>
  <div class="app-container">
    <el-row>
      <el-button :type="tabActive==0?'primary':''" style="margin-right:0" @click="searchBuyway(0)">安心购车</el-button>
      <el-button :type="tabActive==1?'primary':''" style="transform: translateX(-4px);" @click="searchBuyway(1)">简易购车</el-button>
    </el-row>
    <div class="sumList">
      <template v-for="(item,i) in totalObject">
        <div :key="i" class="item" :class="{'active':active==i}" @click="fnActive(i)">
          <div class="num">{{ item.counts|| 0 }}</div>
          <div class="desc"><span v-if="i!==totalObject.length-1 && i!==totalObject.length-2">{{ ['进行中','已完成','已关闭'][item.orderStatus] }}</span> {{ tipsObj[item.processStep] }}</div>
        </div>
      </template>

      <!-- <div class="item">
        <div class="num">{{ totalObject[0].counts || 0 }}</div>
        <div class="desc">{{ ['进行中','已完成','已关闭'][totalObject[0].orderStatus] }}-车辆检测</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject[1].counts || 0 }}</div>
        <div class="desc">{{ ['进行中','已完成','已关闭'][totalObject[1].orderStatus] }}-购车签约</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject[2].counts || 0 }}</div>
        <div class="desc">{{ ['进行中','已完成','已关闭'][totalObject[2].orderStatus] }}-车辆交接</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject[3].counts || 0 }}</div>
        <div class="desc">{{ ['进行中','已完成','已关闭'][totalObject[3].orderStatus] }}-提档过户</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject[4].counts || 0 }}</div>
        <div class="desc">已完成</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject[5].counts || 0 }}</div>
        <div class="desc">已关闭</div>
      </div> -->
    </div>
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户ID</label>
        <el-input
          v-model="searchForm.userId"
          class="search-item"
          placeholder="请输入买方或者卖方用户ID"
          onkeyup="value=value.replace(/[^\d|^.]/g, '')"
        />
      </div>
      <div class="searchItem">
        <label for="">创建时间</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="创建时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
          @change="fnTime"
        />
      </div>
      <div class="searchItem">
        <label for="">VIN</label>
        <el-input
          v-model="searchForm.vin"
          class="search-item"
          placeholder="请输入VIN"
        />
      </div>
      <div class="searchItem">
        <label for="">流程编号</label>
        <el-input
          v-model="searchForm.orderNo"
          class="search-item"
          placeholder="请输入订单编号"
        />
      </div>
      <div class="searchItem">
        <label for="">状态 :</label>
        <el-select v-model="searchForm.orderStatus" placeholder="全部" filterable>
          <el-option label="进行中" value="0" />
          <el-option label="已完成" value="1" />
          <el-option label="已关闭" value="2" />
        </el-select>
      </div>
      <!-- <div class="searchItem">
        <label for="">流程类型:</label>
        <el-select
          v-model="searchForm.application"
          placeholder="全部"
          @change="fnChange"
        >
          <el-option label="全部" value="" />
          <el-option label="安心购车" value="00" />
          <el-option label="简易购车" value="01" />
        </el-select>
      </div> -->
      <div class="searchItem">
        <label for="">交易类型:</label>
        <el-select
          v-model="searchForm.transactionType"
          placeholder="全部"
          @change="fnChange"
        >
          <el-option label="全部" value="" />
          <el-option label="本地交易" value="0" />
          <el-option label="异地交易" value="1" />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button
          v-hasPermission="['valuation:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">买卖车流程列表</div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        :show-overflow-tooltip="true"
        align="center"
        width="50px"
      />
      <el-table-column
        label="流程编号"
        prop="orderNo"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      />
      <el-table-column
        label="订单类型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
        prop="cbsOrderNo"
      >   <template slot-scope="scope">
        {{ ['安心购车','简易购车'][scope.row.buyWay] }}
      </template>

      </el-table-column>
      <el-table-column
        label="交易类型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
        prop="createTime"
      >
        <template slot-scope="scope">
          {{ ['本地购车','异地购车'][scope.row.transactionType] }}
        </template>
      </el-table-column>
      <el-table-column
        label="品牌车型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
        prop="brandName"
      />
      <el-table-column
        label="市场车型"
        :show-overflow-tooltip="true"
        align="center"
        prop="modelName"
        min-width="80px"
      />
      <el-table-column
        label="上架价格（万元）"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
        prop="orderCreateTime"
      />
      <el-table-column
        label="vin"
        :show-overflow-tooltip="true"
        align="center"
        prop="vin"
        min-width="150px"
      />
      <el-table-column
        label="买方用户ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="buserId"
        min-width="150px"
      />
      <el-table-column
        label="卖方户ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="suserId"
        min-width="150px"
      />

      <el-table-column
        label="状态"
        :show-overflow-tooltip="true"
        align="center"
        min-width="180px"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus!=0">{{
            ["进行中", "已完成", "已关闭"][scope.row.orderStatus]
          }}</span>
          <span v-else>
            进行中-{{ tipsObj[scope.row.processStep] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
        </template>

      </el-table-column></el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <!-- <Dialog :id="lookId" :visible="dialogVisible" @fnClose="myclose" /> -->
    <el-dialog title="" :visible.sync="viewDialogVisible" width="30%">
      <img :src="previewUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
// import Dialog from './dialog.vue'
export default {
  components: {
    Pagination
    // Dialog
  },
  data() {
    return {
      tabActive: 0,
      active: 0,
      allCount: 0,
      submitFormEdit: true,
      viewDialogVisible: false,
      previewUrl: '',
      editForm: {
        price: ''
      },
      totalObject: {},
      searchForm: {
        vin: '',
        startTime: '',
        endTime: '',
        orderNo: '',
        userId: '',
        status: '',
        application: '',
        buyWay: 0
      },
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      loading: false,
      tableKey: 0,
      dateTime: '',
      list: [],
      lookId: 0,
      dialogVisible: false,
      editdialogVisible: false,
      paginations: {
        pageSize: 5,
        pageNum: 1
      },
      total2: 0,
      list1: [],
      tipsObj: {
        0: '全部',
        1: '已完成',
        2: '已关闭',
        '301': '车辆检测',
        '302': '购车签约',
        '303': '车辆交接',
        '304': '提档过户'

      }
    }
  },
  created() {
    this.getCarVinReportCount()

    this.search()
  },
  methods: {
    fnActive(i) {
      this.active = i
      if (i == 0) {
        this.searchForm.orderStatus = ''
        this.searchForm.processStep = ''
      } else if (i == 1) {
        this.searchForm.orderStatus = '0'
        this.searchForm.processStep = 301
      } else if (i === 2) {
        this.searchForm.orderStatus = '0'
        this.searchForm.processStep = 302
      } else if (i === 3) {
        this.searchForm.orderStatus = '0'
        this.searchForm.processStep = 303
      } else if (i === 4) {
        this.searchForm.orderStatus = '0'
        this.searchForm.processStep = 304
      } else if (i === 5) {
        this.searchForm.orderStatus = '1'
        this.searchForm.processStep = ''
      } else if (i === 6) {
        this.searchForm.orderStatus = '2'
        this.searchForm.processStep = ''
      }
      this.search()
    },
    getCarVinReportCount() {
      this.$post(
        `/web/vehicleOrder/getVehicleBuyerSellerProcessCounts`
        , { ...this.searchForm }, 'json').then((res) => {
        if (res.data.code === '0') {
          this.totalObject = res.data.data
          this.allCount = 0
          this.totalObject.forEach(item => {
            // let mycounts = 0
            this.allCount += item.counts
          })
          this.totalObject.unshift({
            counts: this.allCount,
            processStep: 0
          })
        }
      })
    },
    fnTime(e) {
      this.getCarVinReportCount()
    },
    fnChange(e) {
      this.getCarVinReportCount()
    },
    view(row) {
      console.log(row.buyWay)
      if (row.buyWay === 0) {
        this.$router.push({
          name: 'processDetail',
          query: {
            id: row.vehicleOrderId,
            userId: row.buserId,
            sellId: row.suserId
          }
        })
      } else {
        this.$router.push({
          name: 'simpleDetail',
          query: {
            id: row.vehicleOrderId,
            userId: row.buserId,
            sellId: row.suserId
          }
        })
      }
    },
    openView(url) {
      this.viewDialogVisible = true
      this.previewUrl = url
    },
    async search(e) {
      this.getCarVinReportCount()
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      if (this.dateTime) {
        this.searchForm.createTimeStart = `${this.dateTime[0]}`
        this.searchForm.createTimeEnd = `${this.dateTime[1]}`
      }
      this.searchForm.userId = this.searchForm.userId.replace(/[^\d|^.]/g, '')
      this.loading = true
      try {
        // /webzlh/reportBase/list/report?userNameOrMobile=13008800250&pageNum=1&pageSize=20
        const result = await this.$post(`/web/vehicleOrder/getVehicleBuyerSellerProcessList?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`, {
          ...this.searchForm
        }, 'json')
        if (result.data.code === '0') {
          this.loading = false
          this.list = result.data.data.records
          this.total = result.data.data.total
        } else {
          this.loading = false
          this.$message.error(result.data.message)
        }
      } catch (error) {
        this.loading = false
      }
    },
    isAssetTypeAnImage(ext) {
      var index = ext.lastIndexOf('.')
      ext = ext.substr(index + 1)
      return (
        [
          'png',
          'jpg',
          'jpeg',
          'bmp',
          'gif',
          'webp',
          'psd',
          'svg',
          'tiff'
        ].indexOf(ext.toLowerCase()) !== -1
      )
    },
    reset() {
      const list = Object.keys(this.searchForm)
      const temp = this.searchForm.buyWay
      list.forEach((element) => {
        this.searchForm[element] = ''
      })
      this.searchForm['buyWay'] = temp
      this.dateTime = ''
      this.search()
    },
    look(row) {
      this.lookId = row.id
      this.dialogVisible = true
      // this.$get('web/carVinReport/getDetail?id=2').then(res => {
      //   console.log(res)
      // })
    },
    myclose() {
      this.dialogVisible = false
    },
    setPrice() {
      this.editdialogVisible = true
    },
    searchBuyway(buyway) {
      this.tabActive = buyway
      this.searchForm.buyWay = buyway
      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
.sumList {
  margin: 20px 10px;
  display: flex;
  justify-content: space-evenly;
  .item {
   cursor: pointer;
    width: 160px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
    &.active{
      background: #66b1ff;
      color: #fff;
    }
  }
}
</style>
